<style lang="scss">
 
.body-mask {
    position: fixed;
    background-color: rgba(0, 0, 0, .3);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
}

.mask-content {
    max-height: 90%;
    width: 460px;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: #fff;
    border-radius: 6px;
    padding: 40px 30px 10px;
}


/* 蒙层的动画 */
.mask-enter,
.mask-leave-to {
    opacity: 0;
}

.mask-enter-to,
.mask-leave {
    opacity: 1;

}

.mask-enter-active,
.mask-leave-active {
    transition: all 0.2s;
}

/* 蒙层中的组件切换的动画 */
.v-enter,
.v-leave-to {
    transform: scale(0.8);
    opacity: 0;
}

.v-enter-to,
.v-leave {
    transform: scale(1);
    opacity: 1;

}

.v-enter-active,
.v-leave-active {
    transition: all 0.2s;
}

</style>

<template>
    <transition name="mask">
        <div class="body-mask" v-show="loginShow" ref="bodyMask">
            <transition appear mode="out-in">
                <component :is="componentName" />
            </transition>
        </div>
    </transition>
</template>

<script>
import LoginBox from './LoginBox'
import RegisterBox from './RegisterBox'
import ForgetPwdBox from './ForgetPwdBox'


export default {
    name: 'Login',
    data() {
        return {
        }
    },
    computed: {
        componentName: {
            get() {
                return this.$store.state.modal.componentName
            }
        },
        loginShow: {
            get() {
                return this.$store.state.modal.modalShow
            }
        }
    },

    mounted() {
        this.$refs['bodyMask'].onmousedown = (e) => {
            if (e.target === this.$refs['bodyMask']) {
                this.$store.commit('modal/updateComponentName', '')
                this.$store.commit('modal/updateLoginShow', false)
                // console.log('nextTick1',this.$store.state.scrollTop1);
                this.$nextTick(()=>{
                    document.body.style.position = "static";
                    document.body.style.top = "auto";
                    document.scrollingElement.scrollTop = this.$store.state.modal.scrollTop1;
                })
            }
        }
    },
    methods: {
        
    },
    components: {
        LoginBox,
        RegisterBox,
        ForgetPwdBox
    }
}
</script>

